Next.js API-ruter: Bygg din backend med letthet

Next.js har revolusjonert front-end-utvikling med sine kraftige funksjoner og intuitive struktur. Men visste du at det også kan forenkle backend-utvikling betydelig? Next.js API-ruter lar deg lage serverløse API-endepunkter direkte i din Next.js-applikasjon, og eliminerer i mange tilfeller behovet for en separat backend-server. Denne omfattende guiden vil lede deg gjennom prosessen med å bygge en robust og skalerbar backend ved hjelp av Next.js API-ruter.

Hva er Next.js API-ruter?

API-ruter er serverløse funksjoner som du oppretter i /pages/api-mappen i Next.js-prosjektet ditt. Disse funksjonene håndterer innkommende HTTP-forespørsler og returnerer responser, akkurat som en tradisjonell backend-API. Hovedforskjellen er at de blir deployert som serverløse funksjoner, noe som betyr at du ikke trenger å administrere servere eller infrastruktur.

Tenk på dem som lettvektige, on-demand backend-funksjoner som er sømløst integrert med din Next.js front-end.

Fordeler med å bruke Next.js API-ruter

• Forenklet utvikling: Skriv både front-end- og backend-koden din i samme prosjekt, ved hjelp av JavaScript eller TypeScript. Ikke mer kontekstbytte mellom forskjellige prosjekter og teknologier.
• Serverløs arkitektur: Dra nytte av skalerbarheten, påliteligheten og kostnadseffektiviteten til serverløs databehandling. Betal kun for ressursene du bruker.
• Enkel distribusjon: Distribuer hele applikasjonen din (front-end og backend) med en enkelt kommando ved hjelp av plattformer som Vercel eller Netlify.
• Innebygd sikkerhet: Next.js og serverløse plattformer gir innebygde sikkerhetsfunksjoner for å beskytte API-endepunktene dine.
• Forbedret ytelse: API-ruter kan distribueres nærmere brukerne dine, noe som reduserer ventetid og forbedrer ytelsen, spesielt gunstig for brukere globalt.
• Gjenbruk av kode: Del kode mellom front-end og backend, noe som reduserer kodeduplisering og forbedrer vedlikeholdbarheten.

Kom i gang med Next.js API-ruter

La oss lage en enkel API-rute som returnerer en JSON-respons. Først, sørg for at du har et Next.js-prosjekt satt opp. Hvis ikke, opprett ett ved å bruke:

            npx create-next-app my-app
cd my-app
            

              
                Copy
              
            
          

Opprett nå en fil med navnet hello.js i /pages/api-mappen:

            // pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

            

              
                Copy
              
            
          

Denne koden definerer en enkel API-rute som svarer med et JSON-objekt som inneholder navnet "John Doe". For å få tilgang til denne API-ruten, start Next.js-utviklingsserveren din:

            npm run dev
            

              
                Copy
              
            
          

Åpne deretter nettleseren din og naviger til http://localhost:3000/api/hello. Du bør se følgende JSON-respons:

            {"name": "John Doe"}
            

              
                Copy
              
            
          

Forstå API-rute-handleren

handler-funksjonen i API-ruten din mottar to argumenter:

• req: En instans av http.IncomingMessage, som inneholder informasjon om den innkommende forespørselen, slik som forespørselsmetode, headere og body.
• res: En instans av http.ServerResponse, som lar deg sende en respons tilbake til klienten.

Du kan bruke disse objektene til å håndtere forskjellige typer forespørsler, lese data fra forespørselskroppen, sette respons-headere og sende forskjellige typer responser.

Håndtering av ulike HTTP-metoder

Du kan bruke req.method-egenskapen for å bestemme HTTP-metoden for den innkommende forespørselen og håndtere forskjellige metoder deretter. For eksempel:

            // pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Håndter GET-forespørsel
    res.status(200).json({ message: 'Dette er en GET-forespørsel' })
  } else if (req.method === 'POST') {
    // Håndter POST-forespørsel
    res.status(200).json({ message: 'Dette er en POST-forespørsel' })
  } else {
    // Håndter andre metoder
    res.status(405).json({ message: 'Metode ikke tillatt' })
  }
}

            

              
                Copy
              
            
          

I dette eksempelet håndterer API-ruten både GET- og POST-forespørsler. Hvis forespørselsmetoden er GET, svarer den med et JSON-objekt som inneholder meldingen "Dette er en GET-forespørsel". Hvis forespørselsmetoden er POST, svarer den med et JSON-objekt som inneholder meldingen "Dette er en POST-forespørsel". Hvis forespørselsmetoden er noe annet, svarer den med en 405 Metode ikke tillatt-feil.

Lese data fra forespørselskroppen

For POST-, PUT- og PATCH-forespørsler må du ofte lese data fra forespørselskroppen. Next.js gir innebygd støtte for å parse JSON og URL-kodede forespørselskropper. For å parse en JSON-forespørselskropp kan du bruke req.body-egenskapen. For eksempel:

            // pages/api/post.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body

    // Behandle dataene
    console.log('Navn:', name)
    console.log('E-post:', email)

    res.status(200).json({ message: 'Data mottatt' })
  } else {
    res.status(405).json({ message: 'Metode ikke tillatt' })
  }
}

            

              
                Copy
              
            
          

For å teste denne API-ruten kan du bruke et verktøy som Postman eller curl for å sende en POST-forespørsel med en JSON-kropp:

            curl -X POST -H "Content-Type: application/json" -d '{"name": "Jane Doe", "email": "jane.doe@example.com"}' http://localhost:3000/api/post
            

              
                Copy
              
            
          

Sette respons-headere

Du kan bruke res.setHeader()-metoden for å sette respons-headere. Dette er nyttig for å sette innholdstype, cache-kontroll og annen viktig informasjon. For eksempel:

            // pages/api/headers.js
export default function handler(req, res) {
  res.setHeader('Content-Type', 'application/json')
  res.setHeader('Cache-Control', 's-maxage=3600')
  res.status(200).json({ message: 'Hallo, verden!' })
}

            

              
                Copy
              
            
          

I dette eksempelet setter API-ruten Content-Type-headeren til application/json, noe som indikerer at responsen er et JSON-objekt. Den setter også Cache-Control-headeren til s-maxage=3600, som forteller nettleseren og CDN-en å cache responsen i opptil 1 time.

Feilhåndtering

Det er viktig å håndtere feil på en elegant måte i API-rutene dine. Du kan bruke try-catch-blokker for å fange unntak og sende passende feilresponser til klienten. For eksempel:

            // pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simuler en feil
    throw new Error('Noe gikk galt')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Intern serverfeil' })
  }
}

            

              
                Copy
              
            
          

I dette eksempelet simulerer API-ruten en feil ved å kaste et nytt Error-objekt. Catch-blokken fanger feilen, logger den til konsollen, og sender en 500 Intern serverfeil-respons til klienten. Vurder å bruke et robust loggingsystem som Sentry eller Datadog for produksjonsmiljøer.

Koble til en database

En av de vanligste bruksområdene for API-ruter er å koble til en database. Next.js API-ruter integreres sømløst med ulike databaser, inkludert:

• MongoDB: En populær NoSQL-database som er godt egnet for fleksible og ustrukturerte data.
• PostgreSQL: En kraftig og åpen kildekode relasjonsdatabase som er kjent for sin pålitelighet og dataintegritet.
• MySQL: En annen populær åpen kildekode relasjonsdatabase som er mye brukt for webapplikasjoner.
• Firebase: En skybasert plattform som tilbyr en sanntidsdatabase og andre tjenester.
• FaunaDB: En serverløs database som er designet for globale applikasjoner.

Her er et eksempel på hvordan du kobler til en MongoDB-database i en Next.js API-rute:

            // pages/api/mongodb.js
import { MongoClient } from 'mongodb'

const uri = process.env.MONGODB_URI
const options = {}

let client
let clientPromise

if (!process.env.MONGODB_URI) {
  throw new Error('Vennligst legg til din Mongo URI i .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // I utviklingsmodus, bruk en global variabel slik at verdien
  // bevares på tvers av modullasting forårsaket av HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // I produksjonsmodus er det best å ikke bruke en global variabel.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Eksporter et modul-scooped MongoClient-løfte. Ved å gjøre dette i en
// separat modul, kan klienten trygt gjenbrukes på tvers av flere
// funksjoner. Se: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb/lib/mongodb.js
export default async function handler(req, res) {
  try {
    const client = await clientPromise
    const db = client.db(process.env.MONGODB_DB)
    const collection = db.collection('users')

    const users = await collection.find({}).toArray()

    res.status(200).json({ users })
  } catch (e) {
    console.error(e)
    res.status(500).json({ message: 'Klarte ikke å hente brukere' })
  }
}

            

              
                Copy
              
            
          

Før du kjører denne koden, sørg for at du har mongodb-pakken installert:

            npm install mongodb
            

              
                Copy
              
            
          

Du må også sette miljøvariablene MONGODB_URI og MONGODB_DB. Disse variablene bør defineres i .env.local-filen din (eller i innstillingene for miljøvariabler hos din hosting-leverandør for produksjon). MONGODB_URI inneholder tilkoblingsstrengen til din MongoDB-database, og MONGODB_DB spesifiserer databasenavnet.

Autentisering og autorisering

Å beskytte API-rutene dine er avgjørende for sikkerheten. Next.js API-ruter kan sikres ved hjelp av ulike autentiserings- og autoriseringsteknikker, inkludert:

• JSON Web Tokens (JWT): En standard for sikker overføring av informasjon mellom parter som et JSON-objekt.
• API-nøkler: En enkel måte å begrense tilgangen til API-endepunktene dine på.
• OAuth: En delegeringsprotokoll som lar brukere gi tredjepartsapplikasjoner tilgang til sine ressurser uten å dele sine påloggingsdetaljer.
• NextAuth.js: En komplett åpen kildekode-autentiseringsløsning for Next.js-applikasjoner.

Her er et eksempel på hvordan du beskytter en API-rute ved hjelp av JWT-autentisering:

            // pages/api/protected.js
import jwt from 'jsonwebtoken'

const secret = process.env.JWT_SECRET

export default function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1]

  if (!token) {
    return res.status(401).json({ message: 'Uautorisert' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded"-objektet inneholder brukerinformasjonen som er innebygd i tokenet
    // For eksempel: const userId = decoded.userId;

    // Fortsett å behandle forespørselen
    res.status(200).json({ message: 'Beskyttet ressurs tilgjengeliggjort' })
  } catch (error) {
    return res.status(401).json({ message: 'Ugyldig token' })
  }
}

            

              
                Copy
              
            
          

Før du kjører denne koden, sørg for at du har jsonwebtoken-pakken installert:

            npm install jsonwebtoken
            

              
                Copy
              
            
          

Du må også sette JWT_SECRET-miljøvariabelen. Dette bør være en sterk, tilfeldig generert hemmelig nøkkel som brukes til å signere og verifisere JWT-er. Lagre denne sikkert og eksponer den aldri i din klient-side-kode.

Middleware

Selv om Next.js ikke tilbyr tradisjonell middleware for API-ruter på samme måte som Express.js, kan du oppnå lignende funksjonalitet ved å pakke inn API-rute-handlerne dine med gjenbrukbare funksjoner. Dette lar deg utføre oppgaver som:

• Autentisering: Verifiser brukerens påloggingsinformasjon før du gir tilgang til API-endepunkter.
• Autorisering: Sjekk om en bruker har de nødvendige tillatelsene til å utføre en bestemt handling.
• Logging: Logg innkommende forespørsler og utgående responser for revisjons- og feilsøkingsformål.
• Validering: Valider forespørselsdata for å sikre at de oppfyller spesifikke kriterier.
• Ratelimiting: Beskytt API-en din mot misbruk ved å begrense antall forespørsler en bruker kan gjøre innenfor en gitt tidsperiode.

Her er et eksempel på hvordan du lager en enkel logging-middleware:

            // utils/middleware.js
export function withLogging(handler) {
  return async function(req, res) {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
    return handler(req, res)
  }
}

            

              
                Copy
              
            
          

For å bruke denne middlewaren, pakk bare API-rute-handleren din inn med withLogging-funksjonen:

            // pages/api/logged.js
import { withLogging } from '../../utils/middleware'

async function handler(req, res) {
  res.status(200).json({ message: 'Denne forespørselen ble logget' })
}

export default withLogging(handler)

            

              
                Copy
              
            
          

Beste praksis for å bygge Next.js API-ruter

• Hold API-rutene dine små og fokuserte. Hver API-rute bør håndtere en spesifikk oppgave eller ressurs.
• Bruk miljøvariabler for sensitiv data. Hardkod aldri hemmeligheter eller API-nøkler i koden din.
• Valider forespørselsdata for å forhindre sikkerhetssårbarheter. Bruk et bibliotek som Joi eller Yup for å validere forespørselskropper.
• Håndter feil på en elegant måte og gi informative feilmeldinger. Bruk try-catch-blokker og logg feil til en sentralisert plassering.
• Bruk caching for å forbedre ytelsen. Cache data som ofte blir aksessert for å redusere databasebelastningen.
• Overvåk API-rutene dine for ytelse og feil. Bruk et overvåkingsverktøy som Sentry eller Datadog for å spore helsen til API-en din.
• Dokumenter API-rutene dine ved hjelp av et verktøy som Swagger eller OpenAPI. Dette gjør det enklere for andre utviklere å bruke API-en din.
• Vurder å bruke TypeScript for typesikkerhet. TypeScript kan hjelpe deg med å fange feil tidlig og forbedre vedlikeholdbarheten til koden din.
• Tenk på internasjonalisering (i18n) fra starten. Hvis applikasjonen din skal brukes av brukere fra forskjellige land, design API-rutene dine for å støtte flere språk og valutaer. For eksempel kan API-endepunkter for e-handel måtte håndtere forskjellige skattesatser og fraktkostnader basert på brukerens plassering.
• Implementer riktig CORS (Cross-Origin Resource Sharing)-konfigurasjon. Dette er avgjørende når API-en din blir aksessert fra et annet domene enn din Next.js-applikasjon. Konfigurer CORS nøye for å tillate kun autoriserte opprinnelser å få tilgang til API-ressursene dine.

Avanserte teknikker

Bakgrunnsjobber

For langvarige oppgaver som ikke bør blokkere API-responsen, vurder å bruke bakgrunnsjobber. Du kan bruke biblioteker som BullMQ eller Bree for å administrere bakgrunnsjobbene dine og behandle dem asynkront.

WebSockets

For sanntidsapplikasjoner kan du bruke WebSockets i Next.js API-rutene dine. Biblioteker som Socket.IO og ws gjør det enkelt å etablere vedvarende forbindelser mellom klienten og serveren.

GraphQL

Hvis du trenger en mer fleksibel og effektiv måte å hente data på, vurder å bruke GraphQL. Du kan bruke biblioteker som Apollo Server eller Yoga for å lage et GraphQL API-endepunkt i Next.js-applikasjonen din.

Konklusjon

Next.js API-ruter gir en kraftig og praktisk måte å bygge serverløse backender direkte i Next.js-applikasjonen din. Ved å utnytte fordelene med serverløs arkitektur kan du forenkle utviklingen, forbedre ytelsen og redusere kostnadene. Enten du bygger et enkelt kontaktskjema eller en kompleks e-handelsplattform, kan Next.js API-ruter hjelpe deg med å lage en robust og skalerbar backend med letthet. Med en solid forståelse av det grunnleggende og anvendelse av beste praksis, kan du utnytte dette kraftige verktøyet til å lage effektive, sikre og globalt tilgjengelige applikasjoner.